
<template>
	<div class="app-body-box">
		<div class="app-header-box">
			<div style="font-size:30px;padding:18px;">小程序</div>
			<div>
				<el-input :prefix-icon="Search" clearable v-model="keywords" style="width: 240px;margin-right:20px;" placeholder="请输入内容" @input="debounceSearch"/>
			</div>
		</div>

		<div class="list-box">
			<div class="list-box-item" v-if="appList.length>0" v-for="(item,index) in appList" @click="openApp(index)">
				<template  v-if="item.name">
					<!-- <img :src="item?.logo" /> -->
					<svg width="50" height="50" xmlns="http://www.w3.org/2000/svg" style="margin-left:10px;">
						<rect x="0" y="0" width="50" height="50" rx="5" ry="5" :fill="logoBg[Math.floor(Math.random() * 7) + 1]" />
						<text x="10" y="30" :font-size="15" fill="#ffffff">logo</text>
					</svg>
					<div class="list-box-item_right">
						<div class="list-box-item_right_title single-line-ellipsis">{{item?.name}}</div>
						<div class="list-box-item_right_desc single-line-ellipsis">{{item?.name}}</div>
					</div>
				</template>
			</div>
			<div class="empty-box" v-else>
				<el-empty description="暂无数据" />
			</div>
		</div>

	</div>
</template>

<script setup lang="ts">

import { ref,onMounted } from "vue";
import { request } from '../utils';
import config from '../mp.config.js'
import { Search } from '@element-plus/icons-vue'

const timer = ref<NodeJS.Timeout | null>(null);
const keywords=ref('');
const appList=ref([{name:'',logo:''}]);
const logoBg=ref(['#F780F4','#7F84F6','#62B1F8','#FDE3CF','#CCCCCC','#87D068','#F56A00']);

onMounted(()=>{

    loadAppList();

});

/**
 * 搜索框防抖
 * 对于搜索框等输入触发请求的场景，使用防抖函数，避免用户输入过程中频繁发送请求
 */
const debounceSearch=()=> {
	if (timer.value) {
		clearTimeout(timer.value);
	}
	timer.value = setTimeout(() => {
		// 发起搜索请求的代码
		loadAppList();
	}, 300);
}
const loadAppList=()=>{
	let data={keywords:keywords.value};
	request({url:config.route.miniapplist,method:'POST',data}).then(res => {
		if(res.code==0){
			appList.value=res.data;
		}
	}).catch(err => {
		console.log(err)
	})
}

const openApp=(index)=>{

	/* let appInfo=appList.value[index];
	window.electron.ipcRenderer.send('open-new-window',JSON.stringify(appInfo)); */

	let appInfo=appList.value[index];
	console.log(appInfo)
	window.electron.ipcRenderer.send('open-mini-app-window',JSON.stringify(appInfo));

	/* AppManager.openApp({
		appId: appInfo.appid,
		path: appInfo.path,
		scene: 1001
	}); */
}

</script>

<style scoped>
.app-body-box {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction:column;
	
}
/**************************** start 滚动条样式 ****************************/
/**
* 下面就讲解滚动条几个属性，主要有下面7个属性
	::-webkit-scrollbar 滚动条整体部分，可以设置宽度啥的
	::-webkit-scrollbar-button 滚动条两端的按钮
	::-webkit-scrollbar-track 外层轨道
	::-webkit-scrollbar-track-piece 内层滚动槽
	::-webkit-scrollbar-thumb 滚动的滑块
	::-webkit-scrollbar-corner 边角
	::-webkit-resizer 定义右下角拖动块的样式
*/
.app-body-box::-webkit-scrollbar{
	/*滚动条整体样式*/
	width : 8px;  /*高宽分别对应横竖滚动条的尺寸*/
	height: 1px;
}
.app-body-box::-webkit-scrollbar-thumb {
	/*滚动条里面小方块*/
	border-radius: 2px;
	/* box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2); */
	background   : #DEDEDE;
	min-height: 40px;
}
.app-body-box::-webkit-scrollbar-track {
	/*滚动条里面轨道*/
	/* box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2); */
	border-radius: 10px;
	/* background: #ededed; */
	background-color:rgba(0, 0, 0, 0);
	opacity: 0;
}
.app-body-box::-webkit-scrollbar-track-piece {
	width:20px;
	opacity: 0;
}
.app-header-box{
	display: flex;justify-content: space-between;align-items: center;
}
/**************************** end 滚动条样式 ****************************/
.list-box {
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	align-content:flex-start;
	.list-box-item{
		width: 190px;
		height: 80px;
		cursor: pointer;
        border:1px solid #E3E3E3;
        margin:10px;
        border-radius: 7px;
        color:#ccc;
        display: flex;
		align-items: center;
		/* flex-direction:column; */
		animation: fade-in 1s ease-out both; /* 逐渐消失动画 */
		.list-box-item_right{
			flex:1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding-left:10px;
			width:90px;
			.list-box-item_right_title{
				font-size: 14px;
				margin-bottom: 5px;
				color:#333;
			}
			.list-box-item_right_desc{
				font-size: 13px;
			}
		}
	}
	.list-box-item:hover{
	    box-shadow: 0 0 10px #ccc;
	}
	/**最后一行，要么3个元素，要么7个元素  (最后一行还剩1个空间)**/  
	/* 24%:列的宽  1:还剩1空间     4%:间隙宽100%-4列*24%=4%;  */
	/* .list-box-item:last-child:nth-child(4n - 1){
		margin-right: calc(24% * 1 + 4%/3*1 );
	} */
	/**最后一行，要么2个元素，要么6个元素  (最后一行还剩1个空间) */
	/* 24%:列的宽  2:还剩2列空间    4%:间隙总宽 / 3：间隙个数（一般总列数减一）  2：还剩2列空间间隙  */
	/* .list-box-item:last-child:nth-child(4n - 2){
		margin-right: calc(24% * 2 + 4%/3*2 );
	} */
	/**最后一行，要么2个元素，要么6个元素  (最后一行还剩1个空间) */
	/* 24%:列的宽  2:还剩2列空间    4%:间隙总宽 / 3：间隙个数（一般总列数减一）  2：还剩2列空间间隙  */
	/* .list-box-item:last-child:nth-child(4n - 3){
		margin-right: calc(24% * 3 + 4%/3*3 );
	} */

}
.list-box::after{
	content: '';
	width: 160px;
	height: 80px;
}
.single-line-ellipsis {
	white-space: nowrap; /* 文本不换行 */
	overflow: hidden; /* 溢出部分隐藏 */
	text-overflow: ellipsis; /* 溢出部分显示省略号 */
}

/* 逐渐显示 */
@keyframes fade-in {
	0% {
	  opacity: 0;
	}
	100% {
	  opacity: 1;
	}
}
.empty-box{
	width:100%;margin:50px auto;display: flex;justify-content: center;align-items: center;
}
</style>